<template>
	<view class="content" style="display: flex;flex-direction: column;justify-content: space-between;height: 100vh;">
		<Nav bgColor="#f8db61">
			<view class="title">
				<image src="/static/icon/user1.png" mode="aspectFill"></image>
			</view>
		</Nav>
		<view class="">
			<view class="container">
				<view class="container-title">国内金价</view>
				<view class="container-money">
					<view class="money-number">551.03</view>
					<view class="money-dolor">￥</view>
				</view>
				<view class="notice-btn">
					<view class="notice-icon">
						<image src="/static/icon/notice.png" mode=""></image>
					</view>
					<view class="notice-txt">订阅</view>
				</view>
				<view class="time-list">
					<view class="time-item" @click="clickItem(item, index)" :class="{ active: current == index }"
						v-for="(item, index) in timeList" :key="index">
						<view class="">
							{{ item.name }}
						</view>
						<view class="" v-if="item.type == 3 || item.type == 4">
							<up-icon name="arrow-down-fill" color="#fff" size="13"></up-icon>
						</view>
					</view>
				</view>
			</view>
			<view class="charts-box">
				<qiun-data-charts canvas2d type="area" :opts="opts" :chartData="chartData" />
			</view>
		</view>
	</view>
	<!-- <view class="add">
		<image src="/static/icon/add.png" mode="aspectFill"></image>
	</view> -->
	<up-picker :show="show" :columns="columns" @cancel="show = false" @close="show = false" confirmColor="#f8db61"
		@confirm="confirm"></up-picker>

	<up-calendar mode="range" @confirm="confirmTime" :show="timeShow" @close="timeShow = false" confirmColor="#f8db61"
		color="#f8db61"></up-calendar>
</template>

<script setup>
	import {
		ref,
		onMounted,
		reactive
	} from 'vue';
	const timeList = ref([{
			name: '实时',
			type: 1
		},
		{
			name: '近一月',
			type: 2
		},
		{
			name: '时间范围',
			type: 4
		},
		{
			name: '黄金',
			type: 3
		}
	]);
	const current = ref(0);
	const clickItem = (item, index) => {
		reset()
		current.value = index;
		if (item.type != 3 || item.type != 4) {
			chartData.value.series[0].data.forEach((value, index, array) => {
				chartData.value.series[0].data[index] = (value + 10) * getRandomInt(10);
			});
		}
		if (item.type == 3) {
			show.value = true
		}
		if (item.type == 4) {
			timeShow.value = true
		}
	};


	const confirm = (data) => {
		reset()
		timeList.value[timeList.value.length - 1].name = data.value[0]
		show.value = false
		chartData.value.series[0].data.forEach((value, index, array) => {
			chartData.value.series[0].data[index] = (value + 10) * getRandomInt(10);
		});

	}

	function getRandomInt(max) {
		return Math.floor(Math.random() * max);
	}

	const show = ref(false)
	const columns = reactive([
		['黄金', '铂金', '白银']
	]);

	const timeShow = ref(false)

	let confirmTimeData = ref('')
	const confirmTime = (data) => {
		reset()
		confirmTimeData.value = data[0] + '-' +
			data[data.length - 1]
		timeList.value[2].name = confirmTimeData.value
		timeShow.value = false
		chartData.value.series[0].data.forEach((value, index, array) => {
			chartData.value.series[0].data[index] = value + 10 + getRandomInt(20);
		});
	}

	const reset = () => {
		chartData.value.series[0].data = [35, 8, 25, 5, 37, 4, 20, 22, 25, 28, 25, 35, 8, 25, 5, 37, 4, 20, 22,
			25, 28, 25
		]
	}

	const opts = reactive({
		color: ["#292522"],
		padding: [15, 15, 0, 15],
		enableScroll: false,
		dataLabel: false,
		width: "471px",
		dataPointShape: false,
		enableMarkLine: false,
		padding: [0, -20, 0, -20],
		legend: {
			show: false,
		},
		xAxis: {
			disableGrid: true,
			disabled: true,
			disableGrid: true
		},
		yAxis: {
			dashLength: 2,
			disabled: true,
			disableGrid: true
		},
		extra: {
			area: {
				type: "curve",
				opacity: 0.2,
				width: 2,
				gradient: true,
				activeType: "hollow",
				linearType: "custom"
			},
			markLine: {
				type: 'solid',
				dashLength: 0
			},
			tooltip: {
				showBox: true,
				bgColor: '#000',
				borderOpacity: 0.6,
				gridColor: '#292522',
				labelFontColor: '#f8db61',
				fontColor: "#f8db61"
			}
		}
	})

	const chartData = ref({})
	const getServerData = () => {
		//模拟从服务器获取数据时的延时
		setTimeout(() => {
			//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
			let res = {
				categories: ["2018-03-12 17:35:37", "2018-03-12 17:35:37", "2018-03-12 17:35:37",
					"2018-03-12 17:35:37", "2018-03-12 17:35:37", "2018-03-12 17:35:37",
					"2018-03-12 17:35:37", "2018-03-12 17:35:37", "2018-03-12 17:35:37",
					"2018-03-12 17:35:37", "2018-03-12 17:35:37", "2018-03-12 17:35:37",
					"2018-03-12 17:35:37", "2018-03-12 17:35:37", "2018-03-12 17:35:37",
					"2018-03-12 17:35:37", "2018-03-12 17:35:37", "2018-03-12 17:35:37",
					"2018-03-12 17:35:37",
					"2018-03-12 17:35:37",
					"2018-03-12 17:35:37", "2018-03-12 17:35:37"
				],
				series: [{
					name: "￥",
					data: [35, 8, 25, 5, 37, 4, 20, 22, 25, 28, 25, 35, 8, 25, 5, 37, 4, 20, 22,
						25, 28, 25
					],
				}]
			};
			chartData.value = JSON.parse(JSON.stringify(res));
			console.log(chartData.value, 'chartData.value')
		}, 500);
	}
	onMounted(() => {
		getServerData()
	})
</script>

<style lang="scss" scoped>
	.charts-box {
		margin-top: 200rpx;
		width: 100%;
		height: 558rpx;
		// position: fixed;
		// left: 0;
		// right: 0;
		// bottom: 0;
	}

	.active {
		background-color: #000000 !important;
		color: #feda44 !important;
	}

	.title {
		padding-left: 32rpx;

		image {
			width: 56rpx;
			height: 56rpx;
			border-radius: 50%;
			border: 2rpx solid #1b1b1d;
		}
	}

	.container {
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;

		.container-title {
			font-family: Source Han Sans, Source Han Sans;
			font-weight: 500;
			font-size: 32rpx;
			color: #1b1b1d;
			font-weight: 900;
		}

		.container-money {
			display: flex;
			height: 104rpx;

			.money-number {
				font-family: Source Han Sans, Source Han Sans;
				font-weight: 500;
				font-size: 72rpx;
				color: #1b1b1d;
				display: flex;
				align-items: flex-end;
				font-weight: 900;
			}

			.money-dolor {
				display: flex;
				align-items: flex-end;
				font-family: Source Han Sans, Source Han Sans;
				font-weight: 500;
				font-size: 72rpx;
				color: #1b1b1d;
				font-weight: 900;
			}
		}

		.notice-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 144rpx;
			height: 56rpx;
			background: #1b1b1d;
			border-radius: 40rpx;
			margin: 16rpx 0 120rpx 0;

			.notice-icon {
				width: 40rpx;
				height: 40rpx;

				image {
					width: 40rpx;
					height: 40rpx;
				}
			}

			.notice-txt {
				font-family: Source Han Sans, Source Han Sans;
				font-weight: 500;
				font-size: 24rpx;
				color: #feda44;
			}
		}

		.time-list {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: wrap;

			.time-item {
				padding: 8rpx;
				margin: 8rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-family: Source Han Sans, Source Han Sans;
				font-weight: 500;
				font-size: 24rpx;
				color: #ffffff;
				width: 200rpx;
				height: 56rpx;
				background: #262722;
				border-radius: 16rpx;
			}
		}
	}

	.add {
		position: fixed;
		bottom: 260rpx;
		right: 40rpx;

		image {
			width: 80rpx;
			height: 80rpx;
		}
	}
</style>

<style>
	page {
		background-color: #f8db61;
	}
</style>